{extend name="base"/}
{block name="resources"}
<style>
    .card-list{

    }
    .card-item-box{
        float: left;
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 10px;
        width: 25%;
    }
    .card-item{
        background: #ffffff;
        padding: 15px;
        text-align: center;
        border: 1px solid #F1F1F1;
    }
    .card-header{
        text-align: left;
        margin-left: -15px;
        padding-left: 15px;
        width: calc(100% + 15px);
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 15px;
    }
    .card-header .card-title{
        display: inline-block;
        font-size: 16px;

    }
    .card-header .card-icon{
        display: inline-block;
    }
    .card-content{
        font-size: 32px;
        color: #4685FD;
        height: 108px;
        line-height: 108px;
        margin-left: -15px;
        padding-left: 15px;
        margin-bottom: -15px;
        width: calc(100% + 15px);
        background: linear-gradient(0deg, #F7FAFF 0%, rgba(247, 250, 255, 0) 100%);
        padding-top: 0;
    }

    .statistics-item-box{
        float: left;
        position: relative;
        display: block;
        box-sizing: border-box;
        padding: 10px;
        width: 25%;
    }
    .statistics-item{
        background: #ffffff;
        padding: 15px;
        text-align: center;
        border: 1px solid #F1F1F1;
    }
    .statistics-header{
        text-align: left;
        margin-left: -15px;
        padding-left: 15px;
        width: calc(100% + 15px);
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 15px;
    }
    .statistics-header .statistics-title{
        display: inline-block;
        font-size: 16px;

    }
    .statistics-header .statistics-icon{
        display: inline-block;
    }
    .statistics-order{
        width: 35%;
    }
    .statistics-recharge{
        width: 65%;
    }
    .card-content{

    }
</style>
{/block}
{block name="main"}
<div class="layui-card ns-card-common ns-card-brief">
    <div class="card-list">
        <div class="card-item-box">
            <div class="card-item">
                <div class="card-header">
                    <div class="card-title">订单总额</div>
                    <div class="card-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台所有店铺订单总金额
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    {$site_order_sum}
                </div>
            </div>
        </div>

        <div class="card-item-box">
            <div class="card-item">
                <div class="card-header">
                    <div class="card-title">店铺订单</div>
                    <div class="card-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台所有店铺购买套餐的订单总额
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    {$group_order_sum}
                </div>
            </div>
        </div>
        <div class="card-item-box">
            <div class="card-item">
                <div class="card-header">
                    <div class="card-title">店铺总数</div>
                    <div class="card-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台店铺总数
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    {$site_count}
                </div>
            </div>
        </div>
        <div class="card-item-box">
            <div class="card-item">
                <div class="card-header">
                    <div class="card-title">短信订单</div>
                    <div class="card-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台店铺购买短信的订单总额
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    {$sms_order_sum}
                </div>
            </div>
        </div>

        <div class="layui-clear"></div>
    </div>

    <div class="statistics-list">
        <div class="statistics-item-box statistics-order">
            <div class="statistics-item">
                <div class="statistics-header">
                    <div class="statistics-title">店铺成交额</div>
                    <div class="statistics-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台所有店铺购买的套餐金额
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="statistics-content">
                    <div id="order" style="width: 100%; height: 360px;"></div>
                </div>
            </div>
        </div>

        <div class="statistics-item-box statistics-recharge">
            <div class="statistics-item">
                <div class="statistics-header">
                    <div class="statistics-title">短信充值订单</div>
                    <div class="statistics-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台所有店铺购买的短信订单
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="statistics-content">
                    <div id="money" style="width: 100%; height: 360px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="statistics-list">
        <div class="statistics-item-box statistics-recharge">
            <div class="statistics-item">
                <div class="statistics-header">
                    <div class="statistics-title">店铺套餐订单</div>
                    <div class="statistics-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    本平台所有店铺购买的套餐订单
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="statistics-content">
                    <div id="group_order" style="width: 100%; height: 360px;"></div>
                </div>
            </div>
        </div>

        <div class="statistics-item-box statistics-order">
            <div class="statistics-item">
                <div class="statistics-header">
                    <div class="statistics-title">店铺转化率</div>
                    <div class="statistics-icon ns-prompt-block">
                        <div class="ns-prompt">
                            <i class="iconfont iconwenhao1"></i>
                            <div class="ns-prompt-box">
                                <div class="ns-prompt-con">
                                    体验店铺和购买店铺的比例
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="statistics-content">
                    <div id="shop_rate" style="width: 100%; height: 360px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}
{block name="script"}
<script src="ADMIN_JS/echarts.min.js"></script>
<script>
    var data = {:json_encode($day_data, JSON_UNESCAPED_UNICODE)};

    var group_order = {:json_encode($group_order, JSON_UNESCAPED_UNICODE)}

    var group_order_money = {:json_encode($group_order_money, JSON_UNESCAPED_UNICODE)}

    var sms_order = {:json_encode($sms_order, JSON_UNESCAPED_UNICODE)}

    var sms_order_money = {:json_encode($sms_order_money, JSON_UNESCAPED_UNICODE)}

    $(function () {
        //店铺成交额
        var myChart = echarts.init(document.getElementById('order'));
        option = {

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {

                bottom: 10,
                left: 'center',
                data: ['店铺续费', '店铺新增']
            },
            series: [
                {
                    name: '成交额',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: "{$site_renew_order_sum}", name: '店铺续费'},
                        {value: "{$site_new_order_sum}", name: '店铺新增'},
                    ],
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        normal:{
                            color:function(params) {
                                var colorList = [
                                    '#8383FB', '#F56E75'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);


        //短信充值订单
        var moneyChart = echarts.init(document.getElementById('money'));
        moneyOption = {
            xAxis: {
                type: 'category',
                data: data
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                trigger: 'axis',
                showContent: true,
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                padding: [5, 10],
                textStyle: {
                    color: '#fff',
                    lineHeight: 30,
                },
                formatter: function(params, ticket, callback) {
                    params = params[0];
                    return "日期：" + params.name + '<br />' + params.seriesName + "：" + params.value + '<br>订单金额：￥'+sms_order_money[params['dataIndex']];
                },
            },
            series: [{
                name: ['订单数'],
                data: sms_order,
                type: 'line',
                smooth: true,
                itemStyle: {
                    color: '#4685FD'
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        moneyChart.setOption(moneyOption);


        //店铺套餐订单
        var myChart = echarts.init(document.getElementById('group_order'));
        option = {
            xAxis: {
                type: 'category',
                data:  data,
            },
            yAxis: {
                type: 'value'
            },
            tooltip: {
                formatter: function(params, ticket, callback) {
                    // console.log(group_order_money);
                    console.log(params);


                    return "日期：" + params.name + '<br />' + params.seriesName + "：" + params.value + '<br>订单金额：￥'+group_order_money[params['dataIndex']];;
                },
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                padding: [5, 10],
                textStyle: {
                    color: '#fff',
                    lineHeight: 30,
                }
            },
            series: [{
                name: ['订单数'],
                data: group_order,
                type: 'bar',
                showBackground: true,
                barCategoryGap: '50%',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#4685FD'},
                            {offset: 1, color: '#4685FD'}
                        ]
                    )
                }
            }]
        };
        myChart.setOption(option);

        //店铺转换率
        var myChart = echarts.init(document.getElementById('shop_rate'));
        option = {

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {

                bottom: 10,
                left: 'center',
                data: ['店铺体验', '店铺购买']
            },
            series: [
                {
                    name: '店铺数量',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: "{$try_site_count}", name: '店铺体验'},
                        {value: "{$buy_site_count}", name: '店铺购买'},
                    ],
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        normal:{
                            color:function(params) {
                                var colorList = [
                                    '#FABF25', '#FA7F25'
                                ];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    })

</script>

{/block}